<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/elementUI.js"></script>

</head>
<body>

<div id="app">

    <el-select v-model="query.fid" clearable placeholder="请选择产地">
        <el-option
                v-for="item in addressList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
        </el-option>
    </el-select>
    <el-input v-model="query.price1" placeholder="请输入价格1" clearable style="width: 200px;"></el-input>
    <el-input v-model="query.price2" placeholder="请输入价格2" clearable style="width: 200px;"></el-input>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%">

        <el-table-column
                prop="id"
                label="编号">
        </el-table-column>

        <el-table-column
                prop="name"
                label="名称">
        </el-table-column>

        <el-table-column
                prop="pname"
                label="厂家">
        </el-table-column>

        <el-table-column
                prop="price"
                label="厂家">
        </el-table-column>


        <!--<el-table-column-->
        <!--prop="num"-->
        <!--label="历史招聘人数">-->
        <!--</el-table-column>-->

        <el-table-column
                prop="createTime"
                label="时间"
                show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态"
                show-overflow-tooltip>
            <template slot-scope="scope">
                <span>{{scope.row.state==1?"已发售":"未发售"}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        type="primary"
                        size="mini"
                        @click="handleEdit(scope.row.id)">点击发货
                </el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[2, 4, 6,10]"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            addressList:[],
            mode: {
                title: "",
                url: ""
            },
            fileList: [],
            formLabelWidth: "120px",
            query: {
                fid: "",
                name:"",
                price1: "",
                price2: "",
                page: 1,
                size: 2
            },
            form: {
                name:"",
                price:"",
                createTime: "",
                state: "",
                fid: ""
            },
            tableData: [],
            total: 0,
            multipleSelection: [],
            dialogVisible: false,
            dialogFormVisible: false
        },
        watch: {
            query: {
                deep: true,
                handler() {
                    this.initData()
                }
            }
        },
        methods: {
            handleEdit(id){
                axios.post("/phone/editState.do?id="+id).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '发货成功!'
                    });
                    this.initData();
                })
            },
            beforeCloseDialog(close) {
                this.initFormData();
                close()//关闭弹窗的方法
            },
            initData() {
                axios.post("/phone/findPageNo.do",this.query).then(res => {
                    this.tableData = res.data.rows;
                    this.total = res.data.total;
                    if (this.tableData.length == 0 && this.query.page > 1) {
                        this.query.page--
                    }
                })

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.query.size = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initFirmData() {
                axios.post("/phone/findFirm.do").then(res => {
                    this.addressList=res.data;
                })

            }
        },
        created() {
            this.initData();
            this.initFirmData();
        }
    })
</script>
</html>